<template>
  <view class="parent-elemet">
    <view class="item-content">
      <view class="content">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          @click="viewDetails(item)"
          class="item-scroll"
        >
          <view class="item-top name-vip">
            <up-image
              :show-loading="true"
              shape="circle"
              :src="item.url"
              width="60px"
              height="60px"
            ></up-image>
            <view class="pilot-info">
              <view class="name-badge">
                <text class="name">{{ item.name }}</text>
                <text class="vip">{{ item.vip }}</text>
              </view>
              <view v-if="item.flightYears" class="detail-info">
                <text>飞龄: {{ item.flightYears }}年</text>
              </view>
            </view>
          </view>
          <view class="item-top item-address">
            <up-icon name="map" size="30"></up-icon>
            <text>{{ item.address }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { getHotPilots } from '@/api/user';

const dataList = ref<any>([]);

// 加载热门飞手数据
const loadHotPilots = async () => {
  try {
    uni.showLoading({
      title: '加载中...',
      mask: true
    });
    
    const result = await getHotPilots();
    console.log('热门飞手数据:', result);
    
    if (result.data && result.data.code === 200) {
      const pilots = result.data.data || [];
      // 转换数据格式以适配前端显示
      dataList.value = pilots.map((pilot: any) => ({
        id: pilot.profileId,
        name: pilot.realName || '飞手',
        url: pilot.avatar || 'https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626',
        vip: '认证飞手',
        address: pilot.address || '未设置地址',
        phone: pilot.phone,
        flightYears: pilot.flightYears,
        age: pilot.age
      }));
      
      uni.hideLoading();
      
      if (dataList.value.length === 0) {
        uni.showToast({
          title: '暂无认证飞手',
          icon: 'none',
          duration: 2000
        });
      }
    } else {
      uni.hideLoading();
      uni.showToast({
        title: result.data?.msg || '获取飞手列表失败',
        icon: 'none',
        duration: 2000
      });
      dataList.value = [];
    }
  } catch (error) {
    uni.hideLoading();
    console.error('加载热门飞手出错:', error);
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none',
      duration: 2000
    });
    dataList.value = [];
  }
};

// 页面加载时获取飞手列表
onMounted(() => {
  loadHotPilots();
});
const forumList = ref<any>([
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "[无人机租赁] 正式与您相遇",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "《政策解读：新无人机飞行管理规定对飞手的影响及应对策略》",
    name: "zyz",
    quantity: "22",
  },
  {
    url:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    content: "无人机飞手如何在旅游航拍中捕捉独特视角",
    name: "zyz",
    quantity: "22",
  },
]);

const viewDetails = (item: any) => {
  uni.navigateTo({
    url: `/detailsPages/details/flyingHandDetails`,
  });
};
</script>

<style lang="scss" scoped>
.parent-elemet {
  height: 100vh;
  overflow: auto;
  .item-first {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    .icon {
      padding: 0px 30px;
    }
  }
  .item-content {
    background-color: #f9fafb;
    padding: 0 10px;
    .content {
      width: 100%;
      overflow: auto;
      .item-scroll {
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 15px;
        display: flex;
        flex-direction: column;
        &:not(:first-child) {
          margin-top: 10px;
        }
        .item-top {
          display: flex;
          align-items: center;
          &.name-vip {
            justify-content: flex-start;
            gap: 15px;
          }
          &.item-address {
            margin-top: 10px;
          }
          .pilot-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            
            .name-badge {
              display: flex;
              align-items: center;
              gap: 10px;
              
              .name {
                font-size: 18px;
                font-weight: 800;
              }
              
              .vip {
                height: 25px;
                line-height: 25px;
                padding: 0 8px;
                background-color: #ffdc00;
                border-radius: 8px;
                color: white;
                font-size: 12px;
              }
            }
            
            .detail-info {
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>
